<template>
  <!-- 产品池管理 -->
  <div class="pro_pool_list">
    <div class="btns" style="padding:1em;margin-bottom:1em;background:#fff">
      <el-select v-model="form.proDetailId" style="margin-right: 6px" filterable clearable placeholder="请选择项目" value-key="name">
        <el-option v-for="item in projects" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-input v-model="form.name" style="width: auto" placeholder="请输入设备名"></el-input>
      <el-input v-model="form.model" style="width: auto" placeholder="请输入型号"></el-input>
      <el-input v-model="form.brand" style="width: auto" placeholder="请输入品牌"></el-input>
      <el-input v-model="form.supplier" style="width: auto" placeholder="请输入供应商"></el-input>
      <el-button style="margin-right: 6px" type="primary" icon="el-icon-search" size="small" @click="buttonToSearch">查询</el-button>
    </div>
    <div style="padding:1em;margin-bottom:1em;background:#fff">
      <div style="padding:1em;margin-bottom:1em;background:#fff">
        <a-table
          :loading="loading"
          :data-source="pools"
          size="small"
          :pagination="pagination"
          :rowKey="record => record.id"
          :scroll="pools.length>0?{x:1300}:{}"
          >
          <a-table-column :width="60" title="序号" align="center">
            <template slot-scope="text, record, index">
              {{index+1}}
            </template>
          </a-table-column>
          <a-table-column :width="100" key="proName" title="项目名" data-index="proName" ellipsis="true" align="center"/>
          <a-table-column :width="100" key="equipmentName" title="设备名" data-index="equipmentName" ellipsis="true" align="center"/>
          <a-table-column :width="100" key="supplier" title="供应商" data-index="supplier" ellipsis="true" align="center"/>
          <a-table-column :width="100" key="quoteBrand" title="品牌" data-index="quoteBrand" ellipsis="true" align="center"/>
          <a-table-column :width="100" key="technicalParams" title="技术参数" data-index="technicalParams" ellipsis="true" align="center"/>
          <a-table-column :width="100" key="quoteModel" title="品牌型号" data-index="quoteModel" ellipsis="true" align="center"/>
          <a-table-column :width="100" key="price" title="单价" data-index="price" ellipsis="true" align="center"/>
          <a-table-column :width="100" key="delivery" title="货期" data-index="delivery" ellipsis="true" align="center"/>
          <a-table-column :width="100" key="warranty" title="质保期" data-index="warranty" ellipsis="true" align="center"/>
          <a-table-column :width="180" key="time" title="时间" data-index="time" ellipsis="true" align="center">
            <template slot-scope="text, record">
              {{dateTimeFormat(record.time)}}
            </template>
          </a-table-column>
          <a-table-column :width="100" key="remark" title="备注" data-index="remark" ellipsis="true" align="center"/>
        </a-table>
      </div>
    </div>
  </div>
</template>
<script>
  import request from '@/utils/request'
  import '@/styles/auto-style.css'
  import { dateTimeFormat,nullFormat } from '@/utils/format'

  export default {
    data() {
      return {
        projects: [],
        form: {},
        visible: false,
        pools: [],
        props: { multiple: true, value: 'id', label: 'name', emitPath: false },
        options: [],
        loading: false,
        pagination: {
          showTotal: total => `共 ${total} 条结果`,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSizeOptions: ['5', '10', '20', '50'],
          pageNum: 1,
          pageSize: 15,
          total: 0,
          onChange: (pageNum) =>  {
            this.pagination.pageNum = pageNum
            this.toSearch()
          },
          onShowSizeChange: (pageNum, pageSize) => {
            this.pagination.pageSize = pageSize
            this.toSearch()
          } // 改变每页数量时更新显示
        }
      }
    },
    created() {
      this.toSearch()
      this.loadProjects()
    },
    methods: {
      buttonToSearch(){
        //查询按钮点击初始化分页参数
        this.pagination.pageNum = 1
        this.pagination.pageSize = 15
        this.toSearch()
      },
      goToProject(id) {
        this.$router.push('/project/detail/list')
      },
      toSearch() {
        this.loading = true
        request.request({
          url: '/inquiryPool/findByParams',
          method: 'get',
          params: { 'name': this.form.name, 
                    'brand': this.form.brand, 
                    'proDetailId': this.form.proDetailId, 
                    'model': this.form.model,
                    'supplier': this.form.supplier,
                    'pageNum': this.pagination.pageNum,
                    'pageSize': this.pagination.pageSize
                  }
        })
          .then(response => {
            this.pools = response.data.records
            this.pagination.pageSize = parseInt(response.data.size)
            this.pagination.total = parseInt(response.data.total)
          })
          .catch(() => {
            this.$message.error('加载异常')
          }).finally(()=>{
            this.loading = false
          })
      },
      dateTimeFormat,
      /**
       * 加载所有项目详情（下拉框信息）
       */
      loadProjects() {
        request.get('/project/detail/findByAll')
          .then(response => {
            this.projects = response.data
          })
      },
    }
  }
</script>
